HTML - CSS : Mise en page
Le principe
Le Box-Model
Avec le HTML et le CSS, tous les éléments affichés suivent le "Box-Model".
Pour résumer, la largeur réelle d'une boite est de :
width + padding + border + margin.
Margin et padding
Lorsque qu'on défini les marges et les paddings, on peut le faire de plusieurs manière :
Le flux
Il existe 3 grands types de boites : inline, block et none. Il est possible de modifier le type d'une boite avec la propriété display .
Boite de type "inline"
- hauteur : adaptée au contenu.
- largeur : adaptée au contenu.
- pas de margin modifiable.
- pas de width ni de height modifiables.
- se comporte comme du texte.
Boite de type "block"
- hauteur : adaptée au contenu.
- largeur : 100% de son parent.
- margin, width et height peuvent être modifiés.
- saute une ligne avant et après.
Positionement
Par defaut, il est impossible de controller directement le positionement d'une boite.
Pour le faire, il faut utiliser une des propriété position : absolute, relative, fixed ou static.
Position: static
- C'est la position standard. Ne pas définir de position revient à lui donner celle ci.
Position: absolute
- Permet d'utiliser les propriétés top, left, right ou bottom par rapport au document.
- Même si on ne déplace pas la boite, elle sort du flux.
- Sur chaque axe, si on ne déplace pas la boite, elle reste à la position que le flux lui a donné.
- Une boite de type block devient aussi petit que possible, par rapport à son contenu, sauf si on utilise la propriété width
Position: relative
- Permet d'utiliser les propriétés top, left, right ou bottom par rapport à sa position initiale.
- La boite laisse un "trou" a son emplacement initial dans le flux.
- Sur chaque axe, si on ne déplace pas la boite, elle reste à la position que le flux lui a donné.
- La boite ne change pas de largeur automatiquement.
- Une boite en positon relative sans utiliser les déplacements ne représente aucun changement visuel.
Position: fixed
- Exactement comme position:absolute, mais ne prends pas en compte le scroll.
Position: absolute avec un parent en Position: relative
- Comme la position absolute, sauf que le placement est par rapport au parent qui est en position relative.
Les floats
Les floats sont un cas particulier du flux standard. Selon si un ou plusieurs élements "flottent", le comportement ne sera pas le même.
Sans float
float simple
float colonnes
Controller le float
Attention, un élément qui flotte devient ignoré par son parent, ce qui peut poser des problèmes de calcul de hauteur.
Lorsqu'on utile un float, on utilise presque systèmatiquement une propriété pour le controller : overflow, clear ou height.
Avec clear
Utiliser clear:left pour controller un float:left, clear:right pour controller un float:right, ou clear:both pour controller les 2 en même temps.
Avec overflow
Utiliser overflow:auto sur le parent direct pour de meilleurs résultats.
Les Medias Query
CSS 2
En CSS 2, il était seulement possible d'associer des styles pour différents médias :
Soit directement dans la balise link :
Ou dans la feuille de style, pour certaines déclarations :
CSS 3
Depuis CSS 3, les medias queries ont gagné en puissance et en souplesse.
Il est maintenant possible d'appliquer certaines déclarations CSS à condition que la taille de l'écran soit suffisante, par exemple.
Ces paramètres doivent être composés à l'aide de and, de or et de not
Quelques propriétés :
- max-width : si la largeur est inférieur à ce seuil. Exemple (max-width: 800px)
- min-width : si la largeur est supérieure à ce seuil.
- orientation : l'orientation du terminal, sur certains téléphones.
Exemple (orientation: landscape) ou (orientation: portrait)
- max-device-aspect-ratio : si l'aspect ratio de l'écran est inférieur.
Exemple (max-device-aspect-ratio: 16/9) - min-device-aspect-ratio : si l'aspect ratio de l'écran est supérieur.
- max-aspect-ratio : si l'aspect ratio visible est inférieur. Exemple (max-aspect-ratio: 16/9)
- min-aspect-ratio : si l'aspect ratio visible est supérieur.
